import styled from "styled-components";

interface IProps {
  size: "small" | "big";
}

const HeaderStyle = styled.div<IProps>`
  padding: 15px var(--paddingX);
  background-image: var(--themeBgImage1);
  height: ${(props: { size: "small" | "big" }) =>
    props.size === "small" ? "23px" : "80px"};
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;

  .header {
    height: 100%;
    display: flex;
    position: relative;

    .return {
      font-size: 18px;
    }

    .title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 15px;
      font-weight: 600;
    }
  }

  .search {
    width: 100%;
    position: absolute;
    bottom: 15%;
  }

  .slot_right {
    position: absolute;
    right: 0;
  }
`;

export default HeaderStyle;
